
<template>
  <!-- 催收执行页-行动区模块 -->
  <section class="component collection-action-area">
    <!-- <el-tabs :value="initComponent.name">
      <el-tab-pane :label="initComponent.label" :name="initComponent.name">
      </el-tab-pane>
    </el-tabs> -->
    <el-card :header="initComponent.label" class="collection-area">
      <component :is="initComponent.name" :caseId="collectonData.caseId" @success="onFollowSuccess"></component>
    </el-card>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { components, tabs } from './collection-action-area/';
import { namespace } from 'vuex-class';
import { Dependencies } from '~/core/decorator';
import { CASE_CHANNEL } from "~/config/enum.config";
import { RepairCasesService } from "~/services/domain-service/repair-cases.service";
const CollectionExecutionModule = namespace('collection-execution');
@Component({
  components: {
    ...components
  },
})
export default class CollectionActionArea extends Vue {
  @Dependencies(RepairCasesService) private repairCasesService: RepairCasesService;
  @CollectionExecutionModule.Getter private collectonData;
  @CollectionExecutionModule.Mutation private updateHistoryInfoActive;
  @CollectionExecutionModule.Mutation private updateAddRecordFlag;

  private collectionType: string = ''
  /**
   * 获取要展示的行动面板
   */
  private get initComponent(): any {
    if (this.collectonData.caseChannel === CASE_CHANNEL.CREDIT_REPAIR) {
      this.getCaseCollectionType()
      return this.collectionType === 'TEL' 
      ? tabs.find(v => v.channel.includes(CASE_CHANNEL.tel)) || {}
      : tabs.find(v => v.channel.includes(CASE_CHANNEL.visit)) || {}
    }
    const tab = tabs.find(v => v.channel.includes(this.collectonData.caseChannel)) || {}
    return tab
  }

  /**
   * 成功后更新历史纪录面板
   */
  private onFollowSuccess() {
    this.updateHistoryInfoActive("")
    this.updateAddRecordFlag(true)
    this.$nextTick(() => {
      this.updateHistoryInfoActive(this.initComponent.historyPanel)
    })
  }

  private getCaseCollectionType() {
    this.repairCasesService.getCollectionTypeByCaseId(this.collectonData.caseId).subscribe(
      data => this.collectionType = data
    )
  }
}
</script>

<style lang="less" scoped>
.component.collection-action-area {
  height: 440px;
  background-color: #fff;
  .collection-area {
    height: 435px;
    overflow-y: auto;
  }
}
</style>